<template>
  <div class="editor-layout">
    <div class="editor-layout__main">
      <slot></slot>
    </div>
    <div class="editor-layout__footer" :style="footerStyle">
      <slot name="footer">
        <el-button v-if="showCancelBtn" size="small" @click="handleCancel">{{cancelText}}</el-button>
        <el-button v-if="showOkBtn" :loading="loading" size="small" type="primary" @click="handleOk">{{submitText}}</el-button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'editor-layout',
  cnName: '编辑时候使用',
  props: {
    submitText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    footerAlign: String,
    loading: Boolean,
    showOkBtn: {
      type: Boolean,
      default: true
    },
    showCancelBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    handleOk() {
      this.$emit('ok')
    },
    handleCancel() {
      this.$emit('cancel')
    }
  },
  computed: {
    footerStyle() {
      const style = {}
      if (this.footerAlign) {
        style.textAlign = this.footerAlign
      }
      return style
    }
  }
}
</script>

<style lang="less" scoped>
  .editor-layout {
    width: 100%;
    height: 100%;
    position: absolute;

    &__main {
      height: calc(100% - 50px);
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      padding: 0px 0px;
    }

    &__footer {
      position: absolute;
      bottom: -10px;
      left: -10px;
      right: -10px;
      padding: 0 10px;
      height: 50px;
      line-height: 50px;
      text-align: right;
      border-top: 1px solid #f2f6fc;
      border-radius: 0 0 4px 4px;
    }
  }
</style>
